import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Link from 'rax-link';
import TextInput from 'rax-textinput';


function User() {
    const [user,setUser] = useState('');
    const [userName , setUserName] = useState('');
    const [cardNo, setCardNo] = useState('');
    const [uiStyle,setUiStyle] = useState('');

    //初始化jsbridge
    const excuteBridge = () => {
    
        ZWJSBridge.onReady(() => { 
          console.log('初始化完成后，执行bridge方法');
        })
      }

      //获取用户类型
      const getUserType = () => {
          excuteBridge();
          console.log('**** begin getUserType() ****');

           ZWJSBridge.getUserType().then(
              (result) => {
                   console.log('#### ZWJSBridge.getUserType() log. userType: ' + result.userType + '####');

                   if (result.userType == 0) {
                       console.log('#### userType ==0');
                    setUser('public person');
                   } else if (result.userType == 1) {
                    console.log('#### userType ==1');
                       setUser('common person');
                   } else if (result.userType == 2) {
                    console.log('#### userType ==2');
                       setUser('legal person');
                   }

                   console.log(result);
          }).catch((error) => { 
            console.log('#### ZWJSBridge.getUserType() error.####');
              console.log(error);
          });


          console.log('**** exit getUserType() ****');
      }

      //获取用户当前UI风格
      const getUiStyle =   ()  =>{
        excuteBridge();
        ZWJSBridge.getUiStyle({})
        .then((result) => {   
            switch(result.uiStyle) {
                case 'normal':
                    setUiStyle('标准模式');
                   break;
                case 'elder':
                    setUiStyle('适老模式');
                   break;
                default:
                    setUiStyle('default');
           } 
            console.log(result); 
        })
        .catch((error) => { setUiStyle('catch 标准模式兼容');  console.log(error); });
      }

      //以当前用户唤起扫脸
      const callScanFace = () => {
          excuteBridge();
        ZWJSBridge.zmAuthentication({ 

        }).then((data) => {
            console.log('#### current user scan face log. ####');
            console.log(data);
        }).catch((error) => { 
            console.log('#### current user scan face error. ####');
            console.log(error);
        });
      }

      //其他用户扫脸
      const callScanOtherFace = () =>{
            excuteBridge();
            console.log('**** begin callScanOterFace() ****');

            ZWJSBridge.zmAuthentication({ 
                certNo: cardNo, 
                certName: userName

            }).then((data) => {
                console.log('#### other user scan face log. #####');
                console.log(data);
            }).catch((error) => { 
                console.log('#### other user scan face error. ####');
                console.log(error);
            });

            console.log('**** exit callScanOterFace() certNo:  ' + cardNo + '  ,certName:  ' + userName +'  ****')
      }

  return (
    <View>
      <div>
          <h1 style={{textAlign:'center',color:'white'}}>6.欢迎来到用户页面</h1>
          <div>
              <h2>6.1  获取用户类型</h2>
              <button 
              onClick={() => { getUserType() }}
              style={{
                width: 160,
                height: 40,
                backgroundColor: 'grey',
                color: 'white',
                fontSize: 8
            }}  
              >获取用户类型</button>
              <span> 
                  <h5 style={{textAlign:'justify',color:'blue'}}>用户类型为：</h5>
                 <Text>{ user }</Text>
              </span>
          </div>

          <div>
              <h2>6.2  获取用户当前UI风格</h2>
              <button 
              onClick={() => { getUiStyle() }}
              style={{
                width: 160,
                height: 40,
                backgroundColor: 'grey',
                color: 'white',
                fontSize: 8
            }}  
              >获取用户当前UI风格</button>
              <span> 
                  <h5 style={{textAlign:'justify',color:'blue'}}>获取用户当前UI风格：</h5>
                 <Text>{ uiStyle }</Text>
              </span>
          </div>

          <div>
              <h2>6.3  支付宝扫脸认证</h2>

              <div>
              <h3>6.3.1 当前登陆用户扫脸</h3>
              <button onClick={() => {callScanFace()}}
                      style={{
                        width: 160,
                        height: 40,
                        backgroundColor: 'grey',
                        color: 'white',
                        fontSize: 8
                    }}  
              >点击刷脸</button>
              </div>
              
              <div>
                  <h3>6.3.2 其他用户扫脸</h3>
                  <h5 style={{textAlign:'justify',color:'blue'}}>用户姓名：</h5>
                  <TextInput value={userName}
                        style={{
                            width: 600,
                            height: 200,
                            borderWidth: 1,
                            borderColor: '#dddddd',
                            borderStyle: 'solid'
                        }}
                            onChangeText={text => setUserName(text)}
                  ></TextInput>
                  <h5 style={{textAlign:'justify',color:'blue'}}>身份证号：</h5>
                  <TextInput value={cardNo}
                            style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                           onChangeText={text => setCardNo(text)}
                  ></TextInput>
                  <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  </div>

                  <button onClick={() => {callScanOtherFace()}}
                          style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                  >刷脸认证</button>
              </div>
          </div>
      </div>
    </View>
  );
}

export default User;
